<template>
  <div class="page TransactionFlow">
    <filterItem
      ref="TransactionFlowFilterItem"
      @filterChoice="handleFilterChoice"
      :defaultStartDate="defaultStartDate"
      :defaultEndDate="defaultEndDate"
      :roleInfo="roleInfo"
    ></filterItem>
    <transactionFlowDetails ref="transactionFlowDetails" :param="detailsData"></transactionFlowDetails>
    <div class="scroll-view">
      <customHeader middleTitle="交易流水" @leftCallBack="goBack" @rightCallBack="handleClickFilter">
        <div>
          <i v-if="searchParam.shopId" class="filter-icon zhk-nav_filter blue"></i>
          <i v-if="!searchParam.shopId" class="filter-icon zhk-nav_filter"></i>
        </div>
      </customHeader>

      <searchBar @search="searchCallbck" placeholder="订单编号/交易流水号"/>
      <div class="filter-result">{{startTime}} 至 {{endTime}}</div>
      <div class="total-data">
        <i class="zhk-jsq"></i>
        <span>实收¥{{numberFormate(summary.realReceiveAmount)}}=收入¥{{numberFormate(summary.incomeAmount)}}-退款¥{{numberFormate(summary.refundAmount)}}</span>
      </div>
      <div class="page-body">
        <div class="section" ref="wrapper" :style="{ height:'100%' }">
          <no-data msg="暂无数据" v-if="list.length==0"></no-data>
          <ul
            class="list"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="30"
          >
            <li v-for="(item,index) in list" :key="index" @click="linkToDetail(item)">
              <div class="left-icon">
                <img v-if="item.payType == 1" :src="tradeXJ" alt>
                <img v-if="item.payType == 2" :src="tradeZFB" alt>
                <img v-if="item.payType == 3" :src="tradeHYK" alt>
                <img v-if="item.payType == 4" :src="tradeYL" alt>
                <img v-if="item.payType == 5" :src="tradeWX" alt>
                <img v-if="item.payType == 6" :src="tradeERP" alt>
              </div>
              <div class="right-data">
                <p>
                  <span class="shop-name">{{item.shopName}}</span>
                  <span
                    class="data-flow"
                  >¥ {{item.tradeType===0?item.supplierReceiveAmount:item.refundAmount}}</span>
                </p>
                <p>
                  <span class="data-time">{{tradeTimeFormate(item.tradeTime)}}</span>
                  <span class="data-status">{{item.tradeType===0?"收款":"退款"}}</span>
                </p>
                <p class="info">第三方交易流水号:{{item.thirdTradeNo}}</p>
              </div>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&role!==''&&list.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import searchBar from "../../components/searchBar/searchBar";
import transactionFlowDetails from "../TransactionFlow/details";
import jsBridge from "../../tools/jsBridge.js";
import { Search, Toast, MessageBox } from "mint-ui";
import noData from "../../components/noData/noData";
import filterItem from "./filterItem";
import moment from "moment";
export default {
  name: "TransactionFlow",
  data() {
    return {
      dateFomate: "YYYY-MM-DD HH:mm",
      loading: false,
      noMore: false,
      nextPage: null,
      detailsData: null,
      list: [],
      summary: {},
      role: "",
      roleInfo: {},
      selfShopId: "",
      tradeZFB: "./static/images/trade/zfbzf.png",
      tradeWX: "./static/images/trade/wxzf.png",
      tradeYL: "./static/images/trade/ylzf.png",
      tradeXJ: "./static/images/trade/xjzf.png",
      tradeHYK: "./static/images/trade/hykzf.png",
      filterData: {
        startDate: this.defaultStartDate,
        endDate: this.defaultEndDate,
        payType: null,
        store: null,
        deviceId: null,
        tradeType: null,
        operatorId: null,
        orderSource: null
      },
      searchParam: {
        pageSize: 20,
        pageNum: 1,
        shopName: null,
        shopId: null,
        id: null
      }
    };
  },
  methods: {
    //千分位分隔符并保留两位小数
    numberFormate(v) {
      if (v !== undefined && v !== null && v !== "" && typeof v === "number") {
        return CommonUtil.milliFormat(v, 2);
      } else {
        return "0.00";
      }
    },
    searchCallbck(v) {
      this.searchParam.id = v;
      this.loadData(1);
    },
    linkToDetail(item) {
      this.detailsData = item;
      this.$refs.transactionFlowDetails.popupShow();
    },
    tradeTimeFormate(tradeTime) {
      return CommonUtil.timestampToTime(tradeTime);
    },
    //打开筛选
    handleClickFilter() {
      this.$refs.TransactionFlowFilterItem.popupShow();
    },
    //筛选确定
    handleFilterChoice(v) {
      const store = this.filterData.store;
      this.filterData = v;
      if (v.store.length === 0) {
        this.filterData.store = store;
      } else {
        this.searchParam.shopId = v.store[0].selectKey;
        this.searchParam.shopName = v.store[0].selectName;
      }
      this.filterData.startDate = v.startDate
        ? v.startDate
        : this.defaultStartDate;
      this.filterData.endDate = v.endDate ? v.endDate : this.defaultEndDate;
      this.filterData.payType = v.payTypeList.map(item => {
        return Number(item.value);
      });
      this.filterData.tradeType =
        v.tradeTypeList.length > 0 ? v.tradeTypeList[0].value : "";
      this.filterData.orderSource = v.orderSourceList.map(item => {
        return Number(item.value);
      });
      this.filterData.deviceId = v.deviceId["value"];
      this.filterData.operatorId = v.operatorId["value"];
      this.loadData(1);
    },
    goBack() {
      if (this.$refs.transactionFlowDetails.popupVisible) {
        this.$refs.transactionFlowDetails.popupHide();
      } else if (this.$refs.TransactionFlowFilterItem.popupVisible) {
        this.$refs.TransactionFlowFilterItem.back();
      } else {
        if (String(this.$route.query.close) == "true") {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    loadData(page) {
      this.loading = true;
      let param = {};
      param.pageSize = this.searchParam.pageSize;
      param.pageNum = page;
      param.shopId =
        this.roleInfo.manyShopFlag? this.searchParam.shopId : this.selfShopId;
      if (this.roleInfo.manyShopFlag && param.shopId == "all") {
        param.shopId = null;
      }
      if (param.pageNum == 1) {
        this.list = [];
      }
      param.roleId = this.searchParam.roleId;
      param.deviceId = this.filterData.deviceId || null;
      param.startDate = this.filterData.startDate || null;
      param.tradeType = this.filterData.tradeType;
      if(this.filterData.endDate){
        if(new Date(this.filterData.endDate).getSeconds()==0){
          param.endDate = this.filterData.endDate + 59*1000;
        }else{
          param.endDate = this.filterData.endDate
        }
      }else{
        param.endDate = null;
      }
      param.id =
        this.searchParam.id && this.searchParam.id.length > 0
          ? this.searchParam.id
          : null;
      param.operatorId = this.filterData.operatorId || null;
      param.orderSource =
        this.filterData.orderSource && this.filterData.orderSource.length > 0
          ? this.filterData.orderSource
          : null;
      param.payType =
        this.filterData.payType && this.filterData.payType.length > 0
          ? this.filterData.payType
          : null;
      this.ajax({
        url: "newapp/order/transcationList.do",
        type: "post",
        controlLoading: true,
        data: param
      })
        .then(res => {
          this.loading = false;
          this.noMore = false;
          if (res.success) {
            var data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && data.list && data.summary) {
              this.list = this.list.concat(data.list.pageData);
              this.summary = data.summary;
              if (data.list.nextPage > page) {
                this.nextPage = data.list.nextPage;
              } else {
                this.noMore = true;
              }
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
        });
    },

    //无限加载
    loadMore() {
      if (this.loading || this.noMore || !this.role) {
        return;
      }
      this.loadData(this.nextPage);
    }
  },
  created() {
    this.filterData.startDate = moment(this.defaultStartDate).valueOf();
    this.filterData.endDate = moment(this.defaultEndDate).valueOf();
    CommonUtil.getUserInfo().then(userInfo => {
      this.role = userInfo.role;
      this.roleInfo = userInfo;
      this.selfShopId = userInfo.yzShopId;
      this.loadData(1);
    });
  },
  computed: {
    defaultStartDate() {
      return new Date(new Date(window.DateUtil.getDateFormat2(new Date())));
    },
    defaultEndDate() {
      return new Date();
    },

    startTime() {
      return moment(this.filterData.startDate).format(this.dateFomate);
    },

    endTime() {
      return moment(this.filterData.endDate).format(this.dateFomate);
    }
  },
  components: {
    customHeader,
    noData,
    searchBar,
    filterItem,
    transactionFlowDetails
  }
};
</script>
<style lang='scss' scoped>
@import "TransactionFlow";
</style>
